import React, { Component } from 'react';
import { Text, View, StyleSheet, StatusBar, Navigator, DeviceEventEmitter, NetInfo, Animated, Platform } from 'react-native';

import Toast from 'react-native-root-toast';

import CustomTransitions from '../utils/CustomTransitions';
import Start from './Public/Start';

import Prompt from './Public/prompt';

global.host = 'https://dms.autoforce.net';
global.WS_URL = 'wss://dms.autoforce.net/api/rtc';

/* global __DEV__ */
if (__DEV__) {
  require('../utils/env');
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      promptPosition: new Animated.Value(0),
      connect: true,
    };
  }
  _renderScene = (route, navigator) => {
    const NewComponent = route.component;
    return <NewComponent {...route.passProps} navigator={navigator} />;
  }
  componentWillMount() {
    if (Platform.OS === 'android') {
      NetInfo.isConnected.fetch().done((isConnected) => {
        if (!isConnected) {
          Animated.timing(this.state.promptPosition, {
            toValue: 1,
            duration: 3000,
          }).start(() => {
            setTimeout(() => {
              Animated.timing(this.state.promptPosition, {
                toValue: 0,
                duration: 3000,
              }).start();
            }, 5000);
          });
        }
      });
      const handleFirstConnectivityChange = () => {
        NetInfo.isConnected.removeEventListener(
          'change',
          handleFirstConnectivityChange,
        );
      };
      NetInfo.isConnected.addEventListener(
        'change',
        handleFirstConnectivityChange,
      );
    } else {
      NetInfo.fetch().done((status) => {
        if (status === 'unknown' || status === 'none') {
          Animated.timing(this.state.promptPosition, {
            toValue: 1,
            duration: 3000,
          }).start(() => {
            setTimeout(() => {
              Animated.timing(this.state.promptPosition, {
                toValue: 0,
                duration: 3000,
              }).start();
            }, 5000);
          });
        }
      });
    }
  }

  componentDidMount() {
    this.listener = DeviceEventEmitter.addListener('showToast', (text, duration, position, shadow, animation, hideOnPress, delay, onShowHandle, onShownHandle, onHideHandle, onHiddenHandle) => {
      Toast.show(text, {
        duration: duration || Toast.durations.SHORT,
        position: position || Toast.positions.CENTER,
        shadow: shadow || true,
        animation: animation || true,
        hideOnPress: hideOnPress || true,
        delay: delay || 0,
        onShow: onShowHandle,
        onShown: onShownHandle,
        onHide: onHideHandle,
        onHidden: onHiddenHandle,
      });
    });
  }
  componentWillUnmount() {
    if (this.listener) {
      this.listener.remove();
    }
  }
  render() {
    const positionY = this.state.promptPosition.interpolate({
      inputRange: [0, 1],
      outputRange: [-30, 0],
    });
    return (
      <View style={style.body}>
        <StatusBar
          backgroundColor="#333333"
          barStyle="dark-content"
        />
        <Animated.View style={[style.netInfoView, { top: positionY }]}>
          <Text style={style.netInfoPrompt}>请检查网络连接</Text>
        </Animated.View>
        {this.state.connect ?
          <Navigator
            initialRoute={{ title: 'init', component: Start }}
            configureScene={() => CustomTransitions.NONE}
            renderScene={this._renderScene}
          /> : <Prompt prompting="请检查网络连接" /> }
      </View>
    );
  }
}

const style = StyleSheet.create({
  body: {
    flex: 1,
  },
  netInfoView: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 30,
    position: 'absolute',
    right: 0,
    left: 0,
    backgroundColor: '#FFA153',
    zIndex: 100,
  },
  netInfoPrompt: {
    color: 'white',
    fontWeight: 'bold',
  },
});

export default App;

